<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="search.SearchItem.role_name"
        placeholder="角色名称"
        class="filter-item search_input"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        添加
      </el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="用户搜索加载"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="角色名称" min-width="10%">
        <template slot-scope="scope">
          {{ scope.row.role_name }}
        </template>
      </el-table-column>

      <el-table-column label="上级角色">
        <template slot-scope="scope">
          {{ scope.row.uprole_name }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="别名" min-width="10%">
        <template slot-scope="scope">
          {{ scope.row.role_other_name }}
        </template>
      </el-table-column>

      <el-table-column label="创建时间" min-width="15%" align="center">
        <template slot-scope="scope">
          {{ scope.row.role_createtime }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <!--修改按钮 -->
        <!-- slot-scope="{ row, $index }"   row代表数据按钮对应的行,  index代表当前行的下标-->
        <template slot-scope="{ row, $index }">
          <!-- @click="handleUpdate(row)  点击按钮执行handleUpdate方法,  row:当前行对应的数据-->
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            修改
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(row, $index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页插件-->
    <!--v-show="total > 0"  总行数大于0的时候显示分页
    :total="total"  总行数绑定total字段
    :page.sync="search.page" 绑定当前页字段
    :limit.sync="search.limit" 绑定页长度
    @pagination="searchPageList"   点击分页执行的方法-->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="search.page"
      :limit.sync="search.limit"
      @pagination="searchPageList"
    />
    <!--弹出层-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <!--表单定义-->
      <!-- ref="adminUserForm"   表单命名,类似于以前的id
      :rules="rules" 对应的验证规则
      :model="adminUserInfo"   表单绑定的数据模型-->
      <el-form
        ref="adminUserForm"
        :rules="rules"
        :model="adminUserInfo"
        label-position="left"
        :inline="true"
      >
        <!--el-row  代表一行-->
        <el-row>
          <!--:span="12" 代表占一半的地方-->
          <el-col :span="24">
            <!--::rules="this.dialogStatus === '1' ? rules.user_name : []"   表示添加的时候才验证用户名是否已经被占用-->
            <el-form-item
              label="角色名称"
              prop="role_name"
              :rules="this.dialogStatus === '1' ? rules.role_name : []"
            >
              <!--v-if="this.dialogStatus === '1'"  vue 的if判断  意思 如果是添加,就显示文本-->
              <el-input
                v-if="this.dialogStatus === '1'"
                v-model="adminUserInfo.role_name"
              />
              <!-- v-else  vue 的else  和上面的if判断对应-->
              <el-tag v-else type="info">{{ adminUserInfo.role_name }}</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <!--\u00a0代表小空格 -->
            <el-form-item :label="'别\u00a0\u00a0名'" prop="role_other_name">
              <el-input v-model="adminUserInfo.role_other_name" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="上级角色">
            <el-select
              v-model="adminUserInfo.role_father_id"
              placeholder="上级角色"
            >
              <el-option label="--" value="0"></el-option>
              <el-option label="超级管理员" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- dialogStatus === '1' 是添加 就执行添加的方法  是修改  就执行修改的方法-->
        <el-button
          type="primary"
          @click="dialogStatus === '1' ? addUser() : updateData()"
        >
          保存
        </el-button>
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
      </div>
    </el-dialog>
  </div>
</template>